<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03.Tab标签切换</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    
    <div id="app"></div>
    <script type="text/babel">
        // 数据
        const title = '03.Tab标签切换'
        const datalist = [{
            username:'laoxie',
            hobby:'大保健'
        },{
            username:'jinjing',
            hobby:'跟着laoxie去大保健'
        },{
            username:'lemon',
            hobby:'一边大保健一边做月饼'
        }];

        const current = 0;

        const root = ReactDOM.createRoot(document.querySelector('#app'))
        // const vnode = React.createElement('div')
        root.render(
            // 虚拟节点
            <div className="p-5">
                <h1>{title}</h1>
                <ul className="nav nav-tabs mt-5">
                    {
                        datalist.map((item,idx)=>{
                            return (
                                <li className="nav-item" key={item.username}>
                                    <a className={"nav-link"+(idx===current?' active':'')}>{item.username}</a>
                                </li>
                            ) 
                        })
                    }
                </ul>
                <div className="p-3">
                    {
                        datalist.map((item,idx)=>(
                            <div key={item.username} style={{display:idx===current?'block':'none'}}>
                                爱好：{item.hobby}
                            </div>
                        ))
                    }
                </div>
            </div>
        )
    </script>
</body>
</html>